/* 外边距、内边距全局样式 */
@for $i from 0 through 50 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

.flex {
  display: flex !important;
  flex-direction: row !important;
}

.flex-column {
  display: flex !important;
  flex-direction: column !important;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-flex-1 {
  flex: 1;
  overflow: hidden;
}

.flex-auto {
  flex: 1 1 auto !important;
  overflow: hidden;
}

.flex-none {
  flex: none !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}


/* 文字单行省略号 */
.sle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.padding-around {
  padding: var(--el-padding) !important;
}

.no-padding {
  padding: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-left {
  margin-left: var(--el-margin) !important;
}

.margin-right {
  margin-right: var(--el-margin) !important;
}

.margin-top {
  margin-top: var(--el-margin) !important;
}

.margin-bottom {
  margin-bottom: var(--el-margin) !important;
}

.width-full {
  width: 100%;
}

.height-full {
  height: 100%;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.active {
  color: var(--el-color-white);
  background: var(--el-color-primary);
  border-radius: var(--el-border-radius);
}

@mixin base-card {
  box-sizing: border-box;
  background: var(--el-color-white);
  //border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.box-card {
  //background: var(--el-color-white);
  //border: 1px solid var(--el-border-color);
  //border-radius: var(--el-border-radius-base);
  @include base-card;
  margin-bottom: var(--el-margin) !important;
}


.header-title {

  display: flex;
  align-items: center;
  //font-family: pfct;
  font-size: 16px;

  &::before {
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 8px;
    content: "";
    background: var(--el-color-primary);
    border-radius: 1px;
  }
}

//.title {
//  display: flex;
//  align-items: center;
//  //font-family: pfct;
//  font-size: 16px;
//}
//
//.title::before {
//  display: inline-block;
//  width: 4px;
//  height: 14px;
//  margin-right: var(--el-margin);
//  content: "";
//  background: var(--el-color-primary);
//  border-radius: 1px;
//}


/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

/* border */
.border {
  //border: 1px solid #e5e6e7;
  border: 1px solid var(--el-border-color);
  background: #ffffff none;
  //border-radius: 4px;
  border-radius: var(--el-border-radius-base);
  width: 100%;
  //height: 100%;
}


.search-box {

  //.el-form-item {
  //  position: relative;
  //  //display: inline-block;
  //  margin-right: var(--el-padding);
  //  margin-bottom: var(--el-padding);
  //  vertical-align: top;
  //}
  //
  //.el-form-item.el-form-item-border {
  //  height: var(--el-input-height);
  //  padding: 1px 0;
  //  border-radius: var(--el-input-border-radius);
  //  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  //  transition: var(--el-transition-box-shadow);
  //  transform: translateZ(0);
  //}
  //
  //.el-form .el-form-item__label {
  //  font-weight: bold;
  //  //font-weight: 700;
  //  height: calc(var(--el-input-height) - 2px) !important;
  //  padding: 0 0 0 var(--el-padding);
  //  line-height: calc(var(--el-input-height) - 2px) !important;
  //  color: var(--el-color-black);
  //}
  //
  //.el-form-item .el-form-item__content {
  //  height: calc(var(--el-input-height) - 2px);
  //  line-height: calc(var(--el-input-height) - 2px);
  //}
  //
  //
  //.el-form .el-form-item__label-wrap {
  //  border: var(--el-border-color-light);
  //  background: var(--el-fill-color-light);
  //  background: #2c6eb2;
  //}
  //
  //
  ///* 当 el-form 的 inline 属性为 true 时 */
  ///* 设置 label 的宽度默认为 68px */
  ////.el-form--inline .el-form-item__label {
  ////  width: 68px;
  ////}
  //
  ///* 设置 el-select 的宽度默认为 240px */
  //.el-form--inline .el-select {
  //  width: 220px;
  //}
  //
  ///* 设置 el-input 的宽度默认为 240px */
  //.el-form--inline .el-input {
  //  width: 220px;
  //}
  //
  //
  //.el-form--inline .el-form-item {
  //  margin-right: 16px !important;
  //}
  //
  //.el-form--inline {
  //  .el-form-item {
  //    & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
  //      min-width: 220px;
  //    }
  //  }
  //}
  //
  //.el-form-item.el-form-item-border .el-select__input,
  //.el-form-item.el-form-item-border .el-input,
  //.el-form-item.el-form-item-border .el-select,
  //.el-form-item.el-form-item-border .el-input__inner {
  //  height: calc(var(--el-input-height) - 2px) !important;
  //  line-height: calc(var(--el-input-height) - 2px) !important;
  //  vertical-align: top;
  //}
  //
  //
  //.el-form-item.el-form-item-border .el-input__wrapper,
  //.el-form-item.el-form-item-border .el-select__wrapper {
  //  height: calc(var(--el-input-height) - 2px);
  //  min-height: calc(var(--el-input-height) - 2px);
  //  padding: 0 var(--el-padding) 0 var(--el-padding);
  //  margin: 0 var(--el-input-border-radius) 0 0;
  //  border-radius: 0;
  //  box-shadow: none;
  //}
  //
  //.el-form-item.el-form-item-border:focus-within,
  //.el-form-item.el-form-item-border.el-form-item-border:hover:focus-within {
  //  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
  //}

}
